<!doctype html>

<head>
    <title>Gifbot - Reverse Gifs</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Reverse a gif online within clicks.">
    <meta name="key" content="gif, gitbot, reverse, reverse gif, replay gif, gif tool">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/normalize.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
    <div class="container">
        <header>
            <h2>Reverse Gif</h2>
            <h4>--reverse a gif within clicks.</h4>
        </header>
        <div class="content">
            <div class="box">
                <input type="file" name="gif" id="gif">
                <label for="gif">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
                        viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve" width="512px" height="512px">

                        <path d="M50.001,7.5l-26,24.398h16.5V57.5h19V31.898h16.5L50.001,7.5z M96.698,65.211L80.78,54.5h-9.816    l17.002,13.043H70.243c-0.508,0-0.969,0.258-1.197,0.664L64.96,79.383H35.038l-4.086-11.176c-0.227-0.406-0.689-0.664-1.197-0.664    H12.032L29.036,54.5h-9.818L3.302,65.211c-2.369,1.415-3.785,4.676-3.15,7.246l2.807,15.369c0.636,2.57,3.452,4.674,6.257,4.674    h81.568c2.805,0,5.621-2.104,6.258-4.674l2.805-15.369C100.485,69.887,99.067,66.626,96.698,65.211z"
                            fill="#FFFFFF" />
                    </svg>
                    Select Gif</label>
                <div></div>
                <button class="btn" type="button" value="Reverse!" id="submit">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px"
                        viewBox="0 0 300.003 300.003" style="enable-background:new 0 0 300.003 300.003;" xml:space="preserve"
                        width="512px" height="512px">
                        <path d="M150.005,0C67.164,0,0.001,67.159,0.001,150c0,82.838,67.162,150.003,150.003,150.003S300.002,232.838,300.002,150    C300.002,67.159,232.844,0,150.005,0z M230.091,172.444c-9.921,37.083-43.801,64.477-83.969,64.477    c-47.93,0-86.923-38.99-86.923-86.923s38.99-86.92,86.923-86.92c21.906,0,41.931,8.157,57.228,21.579l-13.637,23.623    c-11-11.487-26.468-18.664-43.594-18.664c-33.294,0-60.38,27.088-60.38,60.38c0,33.294,27.085,60.38,60.38,60.38    c25.363,0,47.113-15.728,56.038-37.937h-20.765l36.168-62.636l36.166,62.641H230.091z"
                            fill="#FFFFFF" />
                    </svg>
                    Reverse!</button>
                <div class="bouncing-loader">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div>
                    <span class="message"></span>
                </div>
                <img id="output">
            </div>
        </div>
    </div>

    <footer>
        <a class="github-button" href="https://github.com/hopsken/gifbot" data-show-count="true" aria-label="Star hopsken/gitbot on GitHub">Star</a>
        <div>
            <span>Made with
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 57.947 57.947" style="enable-background:new 0 0 57.947 57.947;" xml:space="preserve">
                    <path style="fill:#E64C3C;" d="M28.947,56.486c15.685-11.277,23.532-21.592,27.222-29.46c4.311-9.193,0.561-20.589-8.845-24.413
                       C36.268-1.88,28.947,8.486,28.947,8.486S21.678-1.907,10.623,2.588C1.217,6.412-2.533,17.808,1.778,27.001
                       C5.468,34.868,13.262,45.21,28.947,56.486z" />
                </svg> by
                <a href="https://twitter.com/hopsken_">Hopsken</a>.
            </span>
        </div>
    </footer>

    <script src="{{ url_for('static', filename='js/jquery-3.3.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72710946-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-72710946-1');
    </script>

</body>